<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="__ADMIN__/css/font.css">
    <link rel="stylesheet" href="__ADMIN__/css/xadmin.css">
    <script type="text/javascript" src="__ADMIN__/js/jquery.min.js"></script>
    <script type="text/javascript" src="__ADMIN__/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="__ADMIN__/js/xadmin.js"></script>
    <script type="text/javascript" src="__ADMIN__/js/cookie.js"></script>
    <script type="text/javascript" src="__ADMIN__/js/echarts.min.js"></script>
    <style type="text/css">
        body{position: relative;}
        #chart1{width: 45%;height: 45%;position: absolute;left: 0;top:3%;}
        #chart2{width: 45%;height: 45%;position: absolute;left: 50%;top:3%;}
        #chart3{width: 45%;height: 45%;position: absolute;left: 0;top:53%;}
        #chart4{width: 45%;height: 45%;position: absolute;left: 50%;top:53%;}
        #form{width: 100%;height: 8%;position: absolute;top:0;}
        #table1{width: 100%;position: absolute;left: 0;top:47%;overflow: auto;padding: 20px;}
        .layui-table td{font-size: 16px !important;}
        .layui-table th{font-size: 16px !important;font-weight: 800}
        #table2{width: 50%;height: 100%;position: absolute;right: 0;top:98%;overflow: auto;}
        .layui-form-select dl{z-index: 9999 !important}
    </style>
</head>
<body>

<div id="chart1"></div>
<div id="chart2"></div>

<div id="chart3"></div>
<div id="chart4"></div>


<script type="text/javascript">
    layui.use(['form', 'layedit', 'laydate','table','jquery'], function(){
        var form = layui.form
                ,layer = layui.layer
                ,laydate = layui.laydate
                ,table = layui.table
                ,$ = layui.jquery;

        laydate.render({
            elem: '#start_date'
        });
        laydate.render({
            elem: '#end_date'
        });

        $('#order_type').val('{$order_type}');
        form.render();
        $('#manager_id').val('{$manager_id}');
        form.render();
    });
</script>


<script type="text/javascript">

    const option1 = {
        title: {
            left: 'center',
            text: '员工岗位分布',
            textStyle: {
                color: '#6d6'
            }
        },
        tooltip: {},
        legend: {
            left: 'right',
            top: '10',
            orient: 'vertical',
            data:['主管','员工','运营人员','行政']
        },
        dataset: {
            source: [
                ['quarter', '主管', '员工', '运营人员', '行政'],
                ['员工岗位分布(全部)', {$all_ZG_count}, {$all_YG_count}, {$all_YY_count}, {$all_XZ_count}],
                ['员工岗位分布(在职)', {$onWork_ZG_count}, {$onWork_YG_count}, {$onWork_YY_count}, {$onWork_XZ_count}]
            ]
        },
        series: [
            {
                name: '员工岗位分布(全部)',
                type: 'pie',
                center: ['25%','50%'],  //圆心横坐标、纵坐标
                radius: '70%',
                seriesLayoutBy: 'row',
                encode: {
                    itemName: 0,        //数据项名称，在legend中展示
                    value: 1
                },
                label: {
                    show: false
                }
            },
            {
                name: '员工岗位分布(在职)',
                type: 'pie',
                center: ['75%','50%'],   //圆心横坐标、纵坐标
                radius: '70%',
                seriesLayoutBy: 'row',
                encode: {
                    itemName: 0,         //数据项名称，在legend中展示
                    value: 2
                },
                label: {
                    show: false
                }
            }
        ]
    };

    const option2 = {
        title: {
            left: 'center',
            text: '员工工龄分布',
            textStyle: {
                color: '#6d6'
            }
        },
        tooltip: {},
        legend: {
            left: 'right',
            top: '10',
            orient: 'vertical',
        },
        dataset: {
            source: [
                ['quarter', '不满一年', '一年以上', '二年以上', '三年以上', '四年以上'],
//                ['工龄', 510.8, 539.2, 611, 672, 672]
                ['工龄', {$OneYearSum_lt},{$oneYearSum},{$twoYearSum},{$threeYearSum},{$fourYearSum}]
            ]
        },
        series: [
            {
                name: '工龄',
                type: 'pie',
                seriesLayoutBy: 'row',
                encode: {
                    itemName: 0,   //数据项名称，在legend中展示
                    value: 1
                },
                label: {
                    show: true
                },
                roseType: 'area'   //设置玫瑰图
            }
        ]
    };

    const option3 = {
        title: {
            left: 'center',
            text: '在职情况',
            textStyle: {
                color: '#6d6'
            }
        },
        tooltip: {},
        legend: {
            left: 'right',
            top: '10',
            orient: 'vertical',
            data:['在职','离职']
        },
        dataset: {
            source: [
                ['quarter', '在职', '离职'],
//                ['完美世界', 44, 117]
                ['在职情况', {$all_onWork_count}, {$all_offWork_count}]
            ]
        },
        series: [
            {
                name: '在职情况',
                type: 'pie',
                seriesLayoutBy: 'row',
                encode: {
                    itemName: 0,   //数据项名称，在legend中展示
                    value: 1
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        color: '#484',
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                },
                radius: ['50%', '80%']    //设置不同的内外半径
            }
        ]
    };

    var chart1 = echarts.init(document.getElementById('chart1'));
    var chart2 = echarts.init(document.getElementById('chart2'));
    var chart3 = echarts.init(document.getElementById('chart3'));
//    var chart4 = echarts.init(document.getElementById('chart4'));
    chart1.setOption(option1);
    chart2.setOption(option2);
    chart3.setOption(option3);
//    chart4.setOption(option4);

</script>

</body>
</html>